// const mongoose = require("mongoose");

import Base from "../base.js";
import MoviesApi from "../../api/movies.js";

export default class extends Base {
  data = {
    curPage: 1,
    eachPage: 10, //每页显示条数
    total: 0,
    maxPage: 0, //总页数
    rows: [], //当先页数据
  };
  render() {
    // 渲染电影表格
    this.$el.html(`
    <h1 style="text-align:center">电影列表</h1>
        <div>
            <div class="layui-form-item" style="display:flex;flex-direction:row; text-align: center;">
                <div class="layui-input-block">
                    <input type="text" style="width:400px;margin-left:-110px" id="search" lay-verify="title" autocomplete="off" placeholder="请输入搜索项" class="layui-input ">
                </div>
                <button class="layui-btn layui-icon layui-icon-search" id="search-btn" style="font-size;height:40px;">搜索</button>
            </div>
        <table  class="layui-table" lay-size="sm" id="tableList">
            <thead>
                <tr>
                    <th>id</th>
                    <th>电影名</th>
                    <th>英文名</th>
                    <th>类型</th>
                    <th>首映地区</th>
                    <th>电影时长</th>
                    <th>大陆上映时间</th>
                    <th>评分</th>
                    <th>票房</th>
                    <th>是否是经典</th>
                    <th>导演</th>
                    <th>演员</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody class="movies-list"></body>
        </table>
            <div>
            <div id="demo7"></div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                    <label class="layui-form-label" >页数</label>
                    <div class="layui-input-inline">
                        <select name="quiz" class="curPage" style="height:30px;outline:none;border:1px solid #eeeeee;">
                        </select>
                    </div>
                </div>

                    共<span class="tatol"></span>条
                    当前：<input  type="text" name="eachPage" value="${this.data.eachPage}" style="height:36px;outline:none;border:1px solid #eeeeee;">
                    <button class="first-btn layui-btn layui-btn">首页</button>
                    <button class="prve-btn layui-btn layui-btn">上一页</button>
                    <button class="next-btn layui-btn layui-btn">下一页</button>
                    <button class="last-btn layui-btn layui-btn">末页</button>
                
            </div>
        </div>
        `);

    this.$movieslist = $(".movies-list"); // 表格渲染挂载区域
    this.$curpageEle = $(".curPage"); //总页数
    this.$tatolEle = $(".tatol"); //数据总数
    this.$eachPage = $("input[name=eachPage]"); //当前页
    this.$fristBtn = $(".first-btn"); //首页
    this.$prveBtn = $(".prve-btn"); //上一页
    this.$nextBtn = $(".next-btn"); //下一页
    this.$lastBtn = $(".last-btn"); //尾页
    this.$searchBtn = $("#search-btn"); //搜索按钮
    this.$search = $("#search"); //搜索框
    this.$tableList = $("#tableList");
  }

  //渲染电影列表
  rerender() {
    const str = this.data.rows
      .map((item, index) => {
        return `<tr>
                <td>${index + 1}</td>
                <td>${item.cname}</td>
                <td>${item.ename}</td>
                <td>${item.type}</td>
                <td>${item.area}</td>
                <td>${item.time}</td>
                <td>${item.upDate}</td>
                <td>${item.score}</td>
                <td>${item.count}</td>
                <td>${item.isClassic}</td>
                <td>${item.director}</td>
                <td>${item.actor}</td>
                <td>
                <button  class="layui-btn layui-btn-xs"  id="${
                  item._id
                }" name="updateBtn" value="${index}"><i class="layui-icon"></i>修改</button>
                <button class="layui-btn layui-btn-danger layui-btn-xs" id="${
                  item._id
                }" name="delBtn" value="${index}"><i class="layui-icon"></i>删除</button>
                </td>
              </tr>`;
      })
      .join("");

    this.$movieslist.html(str);
    // layui.use('laypage', function(){
    //     var laypage = layui.laypage;

    //     //执行一个laypage实例
    //     laypage.render({
    //         elem: 'demo7'
    //         , count: 100
    //         , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
    //         , jump: function (obj) {
    //             console.log(obj)
    //         }
    //     });
    //   });

    //完整功能

    this.$tatolEle.html(this.data.total);
    let options = "";
    for (let i = 1; i <= this.data.maxPage; i++) {
      options += `<option value="${i}">${i}</option>`;
    }

    //    更新按钮
    this.$updateBtnEle = $(".updateBtn");
    // this.$delBtnEle=$(".delBtn");
    this.$curpageEle.html(options).val(this.data.curPage);

    // this.$delBtnEle.on("click",this.del.bind(this));
    // this.$updateBtnEle.on("click",this.update.bind(this));
  }
  async getMovies() {
    const { curPage, eachPage } = this.data;
    const data = await MoviesApi.get({ curPage, eachPage });
    Object.assign(this.data, data);
    this.rerender();
  }
  // 获取数据
  mounted() {
    this.getMovies();
  }
  //首页
  first() {
    if (this.data.curPage === 1) return;
    this.data.curPage = 1;
    this.getMovies();
  }
  // 末页
  last() {
    if (this.data.curPage === this.data.maxPage) return;
    this.data.curPage = this.data.maxPage;
    this.getMovies();
  }
  // 上一页
  prveHandle() {
    if (this.data.curPage === 1) return;
    this.data.curPage--;
    this.getMovies();
  }
  // 下一页
  nextHandle() {
    if (this.data.curPage === this.data.maxPage) return;
    this.data.curPage++;
    this.getMovies();
  }
  //    当前页
  setEachePageHandle(e) {
    this.data.eachPage = ~~e.target.value;
    this.getMovies();
  }

  // 删除更新
  async removeHandle(e) {
    if ($(e.target).attr("name") == "delBtn") {
      confirm("确定要删除吗!");
      const _id = $(e.target).attr("id");
      await MoviesApi.remove({ _id });
      this.getMovies();
    } else if ($(e.target).attr("name") == "updateBtn") {
      const _id = $(e.target).attr("id");
      location.hash = `#/info/change-movies/${_id}`;
    }
  }
  // 搜索按钮
  async searchmovie(movie) {
    const data = await MoviesApi.searchMove(movie);
    if (data.length == 0) {
      const str = `<tr style="text-align: center;" ><td  colspan="13" rowspan="2">未找到数据</td></tr>`;
      this.$movieslist.html(str);
    } else {
      this.data.rows = data;
      this.data.total = data.length;
      this.rerender();
    }
  }

  // 搜索

  handle() {
    // 查询
    this.$searchBtn.on("click", () => {
      const cname = this.$search.val();
      this.searchmovie(cname);
    });
    // 首页绑定点击事件
    this.$fristBtn.on("click", this.first.bind(this));
    // 末页绑定点击事件
    this.$lastBtn.on("click", this.last.bind(this));
    // 上一页绑定点击事件
    this.$prveBtn.on("click", this.prveHandle.bind(this));
    // 下一页绑定点击事件
    this.$nextBtn.on("click", this.nextHandle.bind(this));

    // 绑定失去焦点事件
    this.$eachPage.on("blur", this.setEachePageHandle.bind(this));
    // this.$updateBtnEle.on("click",this.nextHandle.bind(this));
    // 删除数据
    this.$tableList.on("click", this.removeHandle.bind(this));
  }
}
